<template>
  <div class="virtual-idol-container">
    <!-- 头部banner -->
    <div class="idol-banner">
      <div class="banner-overlay"></div>
      <div class="banner-content">
        <h1 class="banner-title">虚拟偶像</h1>
        <p class="banner-subtitle">探索二次元的魅力，感受数字偶像的活力</p>
      </div>
    </div>

    <!-- 内容分类标签 -->
    <div class="idol-categories">
      <button 
        v-for="category in categories" 
        :key="category.id"
        class="category-tab"
        :class="{ active: activeCategory === category.id }"
        @click="activeCategory = category.id"
      >
        {{ category.name }}
      </button>
    </div>

    <!-- 热门虚拟偶像 -->
    <div class="popular-idols-section">
      <div class="section-header">
        <h2>热门虚拟偶像</h2>
        <a href="#" class="more-link">查看全部 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="featured-idol">
        <div class="idol-image-container">
          <img :src="featuredIdol.image" :alt="featuredIdol.name" class="idol-image-featured">
          <div class="idol-overlay">
            <button class="follow-btn-featured">
              <i class="fa fa-heart"></i> 关注偶像
            </button>
          </div>
        </div>
        <div class="idol-info-featured">
          <div class="idol-name-container">
            <h3 class="idol-name-featured">{{ featuredIdol.name }}</h3>
            <div class="idol-tags">
              <span v-for="tag in featuredIdol.tags" :key="tag" class="idol-tag">{{ tag }}</span>
            </div>
          </div>
          <div class="idol-stats-featured">
            <div class="stat-item-large">
              <span class="stat-value">{{ featuredIdol.followers }}</span>
              <span class="stat-label">粉丝数</span>
            </div>
            <div class="stat-item-large">
              <span class="stat-value">{{ featuredIdol.videos }}</span>
              <span class="stat-label">作品数</span>
            </div>
            <div class="stat-item-large">
              <span class="stat-value">{{ featuredIdol.concerts }}</span>
              <span class="stat-label">演唱会</span>
            </div>
          </div>
          <div class="idol-description-featured">
            {{ featuredIdol.description }}
          </div>
          <div class="idol-actions-featured">
            <button class="play-btn-featured">
              <i class="fa fa-play-circle"></i> 播放作品
            </button>
            <button class="share-btn-featured">
              <i class="fa fa-share-alt"></i> 分享
            </button>
            <button class="collect-btn-featured">
              <i class="fa fa-star"></i> 收藏
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新作品 -->
    <div class="latest-videos-section">
      <div class="section-header">
        <h2>最新作品</h2>
        <a href="#" class="more-link">查看全部 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="videos-grid">
        <div 
          v-for="video in latestVideos" 
          :key="video.id"
          class="video-card"
        >
          <div class="video-thumbnail-container">
            <img :src="video.thumbnail" :alt="video.title" class="video-thumbnail">
            <div class="video-duration">{{ video.duration }}</div>
          </div>
          <div class="video-info">
            <h3 class="video-title">{{ video.title }}</h3>
            <div class="video-creator">
              <img :src="video.idolImage" :alt="video.idolName" class="creator-avatar">
              <span class="creator-name">{{ video.idolName }}</span>
            </div>
            <div class="video-stats">
              <span class="video-views">{{ video.views }}</span>
              <span class="video-date">{{ video.uploadDate }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 虚拟偶像团体 -->
    <div class="idol-groups-section">
      <div class="section-header">
        <h2>虚拟偶像团体</h2>
        <a href="#" class="more-link">查看全部 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="groups-grid">
        <div 
          v-for="group in idolGroups" 
          :key="group.id"
          class="group-card"
        >
          <div class="group-image-container">
            <img :src="group.image" :alt="group.name" class="group-image">
          </div>
          <div class="group-info">
            <h3 class="group-name">{{ group.name }}</h3>
            <div class="group-stats">
              <div class="group-stat">
                <span class="stat-label">成员数</span>
                <span class="stat-value">{{ group.membersCount }}</span>
              </div>
              <div class="group-stat">
                <span class="stat-label">粉丝数</span>
                <span class="stat-value">{{ group.followers }}</span>
              </div>
              <div class="group-stat">
                <span class="stat-label">作品数</span>
                <span class="stat-value">{{ group.videos }}</span>
              </div>
            </div>
            <button class="follow-group-btn">
              <i class="fa fa-users"></i> 关注团体
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 即将举办演唱会 -->
    <div class="upcoming-concerts-section">
      <div class="section-header">
        <h2>即将举办演唱会</h2>
        <a href="#" class="more-link">查看全部 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="concerts-list">
        <div 
          v-for="concert in upcomingConcerts" 
          :key="concert.id"
          class="concert-card"
        >
          <div class="concert-date">
            <div class="concert-month">{{ concert.month }}</div>
            <div class="concert-day">{{ concert.day }}</div>
          </div>
          <div class="concert-info">
            <h3 class="concert-title">{{ concert.title }}</h3>
            <div class="concert-idol">{{ concert.idolName }}</div>
            <div class="concert-details">
              <div class="detail-item">
                <i class="fa fa-map-marker"></i>
                <span>{{ concert.location }}</span>
              </div>
              <div class="detail-item">
                <i class="fa fa-clock-o"></i>
                <span>{{ concert.time }}</span>
              </div>
            </div>
            <p class="concert-description">{{ concert.description }}</p>
          </div>
          <button class="get-tickets-btn">
            <i class="fa fa-ticket"></i> 立即购票
          </button>
        </div>
      </div>
    </div>

    <!-- 官方周边 -->
    <div class="merchandise-section">
      <div class="section-header">
        <h2>官方周边</h2>
        <a href="#" class="more-link">查看全部 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="merchandise-grid">
        <div 
          v-for="item in merchandise" 
          :key="item.id"
          class="merchandise-card"
        >
          <div class="merchandise-image-container">
            <img :src="item.image" :alt="item.name" class="merchandise-image">
            <div v-if="item.discount" class="merchandise-discount">
              {{ item.discount }}
            </div>
          </div>
          <div class="merchandise-info">
            <h3 class="merchandise-name">{{ item.name }}</h3>
            <div class="merchandise-idol">{{ item.idolName }}</div>
            <div class="merchandise-price">
              <span class="current-price">¥{{ item.price }}</span>
              <span v-if="item.originalPrice" class="original-price">¥{{ item.originalPrice }}</span>
            </div>
            <button class="add-to-cart-btn">
              <i class="fa fa-shopping-cart"></i> 加入购物车
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 粉丝活动 -->
    <div class="fan-activities-section">
      <div class="section-header">
        <h2>粉丝活动</h2>
        <a href="#" class="more-link">查看全部 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="activities-grid">
        <div 
          v-for="activity in fanActivities" 
          :key="activity.id"
          class="activity-card"
        >
          <div class="activity-image-container">
            <img :src="activity.image" :alt="activity.title" class="activity-image">
          </div>
          <div class="activity-info">
            <div class="activity-tag" :class="activity.type">{{ activity.typeText }}</div>
            <h3 class="activity-title">{{ activity.title }}</h3>
            <div class="activity-date">{{ activity.date }}</div>
            <p class="activity-description">{{ activity.description }}</p>
            <div class="activity-stats">
              <div class="stat-item">
                <i class="fa fa-user"></i>
                <span>{{ activity.participants }}人参与</span>
              </div>
              <div class="stat-item">
                <i class="fa fa-heart"></i>
                <span>{{ activity.likes }}人点赞</span>
              </div>
            </div>
            <button class="join-activity-btn">
              {{ activity.buttonText }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logoImage from '@/assets/logo.png'

export default {
  name: 'VirtualIdolView',
  data() {
    return {
      // 分类数据
      categories: [
        { id: 'all', name: '全部' },
        { id: 'vtuber', name: 'VTuber' },
        { id: 'anime', name: '动漫角色' },
        { id: 'music', name: '音乐偶像' },
        { id: 'game', name: '游戏角色' },
        { id: 'live2d', name: 'Live2D' },
        { id: '3d', name: '3D模型' },
        { id: 'ai', name: 'AI偶像' },
      ],
      activeCategory: 'all',
      
      // 特色偶像
      featuredIdol: {
        id: 1,
        name: '初音未来',
        image: logoImage,
        tags: ['歌姬', 'Vocaloid', '人气王'],
        followers: '2560万',
        videos: '3200+',
        concerts: '48',
        description: '初音未来是Crypton Future Media公司开发的VOCALOID系列虚拟歌手软件的拟人化形象，作为世界上最知名的虚拟偶像之一，拥有庞大的粉丝群体和无数的音乐作品。自2007年诞生以来，已经举办过多场全球巡回演唱会，并且在游戏、动画、漫画等多个领域都有发展。',
      },
      
      // 最新作品
      latestVideos: [
        {
          id: 101,
          title: '全新单曲《世界第一的公主殿下》',
          thumbnail: logoImage,
          duration: '04:23',
          idolName: '初音未来',
          idolImage: logoImage,
          views: '125.8万',
          uploadDate: '2天前',
        },
        {
          id: 102,
          title: '虚拟演唱会精彩片段合集',
          thumbnail: logoImage,
          duration: '12:45',
          idolName: '洛天依',
          idolImage: logoImage,
          views: '86.3万',
          uploadDate: '5天前',
        },
        {
          id: 103,
          title: '游戏角色配音现场',
          thumbnail: logoImage,
          duration: '08:17',
          idolName: '绊爱',
          idolImage: logoImage,
          views: '75.6万',
          uploadDate: '1周前',
        },
        {
          id: 104,
          title: '全新造型展示会',
          thumbnail: logoImage,
          duration: '06:32',
          idolName: '辉夜月',
          idolImage: logoImage,
          views: '64.2万',
          uploadDate: '1周前',
        },
      ],
      
      // 偶像团体
      idolGroups: [
        {
          id: 201,
          name: 'Hololive',
          image: logoImage,
          membersCount: '50+',
          followers: '3200万',
          videos: '15000+',
        },
        {
          id: 202,
          name: 'A-SOUL',
          image: logoImage,
          membersCount: 5,
          followers: '1800万',
          videos: '1200+',
        },
        {
          id: 203,
          name: 'NIJISANJI',
          image: logoImage,
          membersCount: '100+',
          followers: '2800万',
          videos: '12000+',
        },
        {
          id: 204,
          name: 'VSPO!',
          image: logoImage,
          membersCount: '20+',
          followers: '900万',
          videos: '5000+',
        },
      ],
      
      // 即将举办演唱会
      upcomingConcerts: [
        {
          id: 301,
          title: '初音未来魔法未来2024演唱会',
          location: '东京体育馆',
          time: '19:00',
          month: '6月',
          day: '25',
          idolName: '初音未来',
          description: '一年一度的魔法未来演唱会即将在东京举办，初音未来将带来全新曲目和舞台表演！',
        },
        {
          id: 302,
          title: 'A-SOUL一周年纪念演唱会',
          location: '上海梅赛德斯奔驰文化中心',
          time: '18:30',
          month: '7月',
          day: '15',
          idolName: 'A-SOUL',
          description: 'A-SOUL成员将集体亮相，带来精彩的歌舞表演和粉丝互动环节！',
        },
      ],
      
      // 官方周边
      merchandise: [
        {
          id: 401,
          name: '初音未来2024限定手办',
          image: logoImage,
          idolName: '初音未来',
          price: 899,
          originalPrice: 1299,
          discount: '7折',
        },
        {
          id: 402,
          name: '洛天依主题T恤',
          image: logoImage,
          idolName: '洛天依',
          price: 199,
          originalPrice: 299,
          discount: '6.7折',
        },
        {
          id: 403,
          name: '绊爱联名耳机',
          image: logoImage,
          idolName: '绊爱',
          price: 1299,
          originalPrice: 1599,
          discount: '8.1折',
        },
        {
          id: 404,
          name: 'Hololive全员海报套装',
          image: logoImage,
          idolName: 'Hololive',
          price: 299,
          originalPrice: 399,
          discount: '7.5折',
        },
      ],
      
      // 粉丝活动
      fanActivities: [
        {
          id: 501,
          title: '初音未来17周年线上庆祝活动',
          image: logoImage,
          type: 'event',
          typeText: '线上活动',
          date: '2024-08-31 19:00',
          description: '初音未来17周年特别直播，将有新歌首发和神秘嘉宾亮相！',
          participants: 2568,
          likes: 4321,
          buttonText: '预约提醒',
        },
        {
          id: 502,
          title: '虚拟偶像插画创作大赛',
          image: logoImage,
          type: 'competition',
          typeText: '创作大赛',
          date: '2024-06-01 至 2024-06-30',
          description: '展现你的绘画才华，创作虚拟偶像主题插画，赢取丰厚奖品！',
          participants: 1256,
          likes: 3789,
          buttonText: '立即参赛',
        },
        {
          id: 503,
          title: '虚拟偶像演唱会线下观影会',
          image: logoImage,
          type: 'meeting',
          typeText: '线下聚会',
          date: '2024-07-20 14:00',
          description: '和其他粉丝一起观看虚拟偶像演唱会直播，交流互动！',
          participants: 89,
          likes: 156,
          buttonText: '报名参加',
        },
        {
          id: 504,
          title: '虚拟偶像知识问答挑战赛',
          image: logoImage,
          type: 'game',
          typeText: '互动游戏',
          date: '2024-06-15 全天',
          description: '测试你对虚拟偶像的了解程度，看看谁是真正的粉丝！',
          participants: 3456,
          likes: 2890,
          buttonText: '开始答题',
        },
      ],
    }
  },
}
</script>

<style scoped>
.virtual-idol-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 头部Banner样式 */
.idol-banner {
  position: relative;
  height: 400px;
  background-image: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" fill="%23ffffff" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E');
  opacity: 0.3;
}

.banner-content {
  position: relative;
  text-align: center;
  z-index: 1;
}

.banner-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 16px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-subtitle {
  font-size: 20px;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 分类标签 */
.idol-categories {
  background-color: white;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.idol-categories::-webkit-scrollbar {
  display: none;
}

.category-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.category-tab:hover {
  color: #9c27b0;
}

.category-tab.active {
  color: white;
  background-color: #9c27b0;
}

/* 通用区域样式 */
.popular-idols-section,
.latest-videos-section,
.idol-groups-section,
.upcoming-concerts-section,
.merchandise-section,
.fan-activities-section {
  margin: 30px 20px;
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.section-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.more-link {
  color: #9c27b0;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.more-link:hover {
  text-decoration: underline;
}

/* 特色偶像样式 */
.featured-idol {
  display: flex;
  gap: 30px;
  padding: 20px;
  background-color: #f3e5f5;
  border-radius: 8px;
}

.idol-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  flex-shrink: 0;
}

.idol-image-featured {
  width: 300px;
  height: 400px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.idol-image-container:hover .idol-image-featured {
  transform: scale(1.05);
}

.idol-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.idol-image-container:hover .idol-overlay {
  opacity: 1;
}

.follow-btn-featured {
  padding: 12px 24px;
  background-color: #e91e63;
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.follow-btn-featured:hover {
  background-color: #c2185b;
  transform: scale(1.05);
}

.idol-info-featured {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.idol-name-container {
  margin-bottom: 20px;
}

.idol-name-featured {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.idol-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.idol-tag {
  padding: 6px 16px;
  background-color: #e1bee7;
  color: #6a1b9a;
  border-radius: 16px;
  font-size: 14px;
  font-weight: bold;
}

.idol-stats-featured {
  display: flex;
  gap: 30px;
  margin-bottom: 24px;
  padding: 16px;
  background-color: #fce4ec;
  border-radius: 8px;
}

.stat-item-large {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #9c27b0;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #777;
}

.idol-description-featured {
  line-height: 1.8;
  color: #555;
  margin-bottom: 24px;
  font-size: 16px;
}

.idol-actions-featured {
  display: flex;
  gap: 16px;
  margin-top: auto;
}

.play-btn-featured,
.share-btn-featured,
.collect-btn-featured {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.play-btn-featured {
  background-color: #9c27b0;
  color: white;
}

.play-btn-featured:hover {
  background-color: #7b1fa2;
}

.share-btn-featured {
  background-color: #f0f0f0;
  color: #666;
}

.share-btn-featured:hover {
  background-color: #e0e0e0;
}

.collect-btn-featured {
  background-color: #fff3e0;
  color: #f57c00;
}

.collect-btn-featured:hover {
  background-color: #ffe0b2;
}

/* 视频网格样式 */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.video-card {
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.video-thumbnail-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 比例 */
  overflow: hidden;
}

.video-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.video-card:hover .video-thumbnail {
  transform: scale(1.05);
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.video-info {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-creator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.creator-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.creator-name {
  font-size: 14px;
  color: #666;
}

.video-stats {
  display: flex;
  gap: 16px;
  margin-top: auto;
}

.video-views,
.video-date {
  font-size: 12px;
  color: #999;
}

/* 偶像团体样式 */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.group-card {
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.group-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.group-image-container {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.group-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.group-card:hover .group-image {
  transform: scale(1.05);
}

.group-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.group-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
}

.group-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.group-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group-stat .stat-label {
  font-size: 14px;
  color: #666;
}

.group-stat .stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #9c27b0;
}

.follow-group-btn {
  padding: 10px 16px;
  background-color: #9c27b0;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.3s ease;
  margin-top: auto;
}

.follow-group-btn:hover {
  background-color: #7b1fa2;
}

/* 演唱会样式 */
.concerts-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.concert-card {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.concert-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.concert-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: #9c27b0;
  color: white;
  border-radius: 8px;
  flex-shrink: 0;
}

.concert-month {
  font-size: 16px;
  font-weight: bold;
}

.concert-day {
  font-size: 32px;
  font-weight: bold;
}

.concert-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.concert-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.concert-idol {
  font-size: 16px;
  color: #9c27b0;
  font-weight: bold;
  margin-bottom: 12px;
}

.concert-details {
  display: flex;
  gap: 24px;
  margin-bottom: 8px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
}

.concert-description {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 16px;
}

.get-tickets-btn {
  padding: 10px 20px;
  background-color: #e91e63;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.3s ease;
  align-self: flex-start;
}

.get-tickets-btn:hover {
  background-color: #c2185b;
}

/* 周边商品样式 */
.merchandise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.merchandise-card {
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.merchandise-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.merchandise-image-container {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.merchandise-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.merchandise-card:hover .merchandise-image {
  transform: scale(1.05);
}

.merchandise-discount {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: #ff4757;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.merchandise-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.merchandise-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.4;
}

.merchandise-idol {
  font-size: 14px;
  color: #9c27b0;
  margin-bottom: 12px;
}

.merchandise-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.current-price {
  font-size: 18px;
  font-weight: bold;
  color: #ff4757;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.add-to-cart-btn {
  padding: 10px 16px;
  background-color: #2ed573;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.3s ease;
  margin-top: auto;
}

.add-to-cart-btn:hover {
  background-color: #26c6da;
}

/* 粉丝活动样式 */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.activity-card {
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.activity-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.activity-image-container {
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.activity-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.activity-card:hover .activity-image {
  transform: scale(1.05);
}

.activity-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.activity-tag {
  position: absolute;
  top: -28px;
  right: 16px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.activity-tag.event {
  background-color: #3742fa;
}

.activity-tag.competition {
  background-color: #ff6348;
}

.activity-tag.meeting {
  background-color: #1e90ff;
}

.activity-tag.game {
  background-color: #70a1ff;
}

.activity-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-date {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.activity-description {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.activity-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #999;
}

.join-activity-btn {
  padding: 10px 16px;
  background-color: #ff6348;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: auto;
}

.join-activity-btn:hover {
  background-color: #ff4757;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .videos-grid,
  .groups-grid,
  .merchandise-grid,
  .activities-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .banner-title {
    font-size: 36px;
  }
  
  .banner-subtitle {
    font-size: 18px;
  }
  
  .featured-idol {
    flex-direction: column;
    align-items: center;
  }
  
  .idol-image-featured {
    width: 240px;
    height: 320px;
  }
  
  .idol-stats-featured {
    gap: 16px;
  }
  
  .concerts-list {
    gap: 16px;
  }
  
  .concert-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .concert-date {
    margin-bottom: 16px;
  }
  
  .concert-details {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .get-tickets-btn {
    align-self: center;
    margin-top: 16px;
  }
  
  .videos-grid,
  .groups-grid,
  .merchandise-grid,
  .activities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .banner-title {
    font-size: 32px;
  }
  
  .banner-subtitle {
    font-size: 16px;
  }
  
  .idol-categories {
    padding: 12px;
    gap: 8px;
  }
  
  .category-tab {
    padding: 6px 12px;
    font-size: 14px;
  }
  
  .idol-actions-featured {
    flex-wrap: wrap;
  }
  
  .videos-grid,
  .groups-grid,
  .merchandise-grid,
  .activities-grid {
    grid-template-columns: 1fr;
  }
}
</style>